<template>
    <div class="section-header text-center">
        <div class="subtitle subtitle--style2 justify-content-center">
            <img src="/images/icon/home2/1.png" alt="star icon">
            <p class="mb-0">Latest Course</p>
        </div>
        <h2>Course Subjects to suit you</h2>
        <p class="style2">Circuit is flexible and affordable and offers you exceptional support
            to achieve your career goals. Choose your most preferred course.</p>
    </div>
    <div class="course__wrapper">
        <div class="row g-4">
            <div v-for="(item, idx) in courses.slice(0, 6)" :key="idx" class="col-lg-4 col-md-6">
                <div class="course__item" :data-aos="AnimationClasses[idx % 3]" data-aos-duration="1000"
                    data-aos-delay="100">
                    <div class="course__item-inner">
                        <div class="course__thumb">
                            <div class="course__thumb-inner">
                                <img :src="item.thumbnail" alt="course image">
                            </div>
                            <nuxt-link to="/cart" class="course__thumb-add"><i class="fa-solid fa-plus"></i></nuxt-link>
                        </div>
                        <div class="course__content">
                            <div class="course__content-details">
                                <p>{{ item.category }}</p>
                                <h6><nuxt-link to="/course-details" class="stretched-link"> {{ item.title }}</nuxt-link>
                                </h6>
                                <div class="course__focus">
                                    <span>{{ item.rating }}</span>
                                    <img src="/images/course/star.png" alt="review-star">
                                    <span>({{ item.ratingCount }})</span>
                                </div>
                            </div>
                            <div class="course__content-price">
                                <h6>${{ item.price }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="text-center">
            <nuxt-link to="/courses" class="trk-btn trk-btn--border trk-btn--secondary2 mt-5">Show All Course
                <span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        courses: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            AnimationClasses: [
                'fade-up-right', 'fade-up', 'fade-up-left'
            ]
        }
    },

}
</script>

<style></style>